const { amapInfo } = global.dataConfig
const baseCdn = 'https://xm-cdn.oss-cn-hangzhou.aliyuncs.com/img/data-screen/'

class Map {
  constructor(dom, center, zoom, callback) {
    this.dom = dom
    this.center = center
    this.zoom = zoom
    this.callback = callback
    // 内部全局数据
    this.map = null
  }
  // 注册地图
  initMap () {
    this.map = new AMap.Map(this.dom, {
      mapStyle: `amap://styles/${amapInfo.mapStyleId}`,
      center: this.center,
      zoom: this.zoom,
      resizeEnable: true,
      animateEnable: true,
      isHotspot: true
    })
    // 回调出map对象
    this.callback(this.map)
  }
  // 实时交通信息
  installTrafficLayer (cb) {
    this.initMap()
    const trafficLayer = new AMap.TileLayer.Traffic({
      zIndex: 10
    })
    trafficLayer.setMap(this.map)
    // 回调交通信息对象
    cb(trafficLayer)
  }
  // 热力图
  installHeatMap (data) {
    this.initMap()
    this.map.plugin(['AMap.Heatmap'], () => {
      const heatMap = new AMap.Heatmap(this.map, {
        radius: 25, //给定半径
        // opacity: [0, 0.9],
        gradient:{
          0: '#234ff5',
          0.50: '#1ff6bc',
          0.70: '#8afc2d',
          0.90: '#fff113',
          1.0: '#ff3600'
        }
      })
      heatMap.setDataSet({ data: data, max: 4000 })
    })
  }
  // 车辆归位
  installParkingInfo (data) {
    this.initMap()
    const map = this.map
    const iconArr = [baseCdn + 'blue-parking-info.png', baseCdn + 'orange-parking-info.png', baseCdn + 'purple-parking-info.png']

    for (let i = 0; i < data.length; i++) {
      addMarker(i, data[i])
    }

    function addMarker(index, parkingData) {
      const position = [parkingData.lng, parkingData.lat]
      const icon = iconArr[0]
      const marker = new AMap.Marker({
        map: map,
        position: position,
        icon: new AMap.Icon({
          size: new AMap.Size(56, 60),  //图标大小
          image: icon
        })
      })
      marker.content = parkingData
      marker.on('mouseover', markerClick)
      marker.on('mouseout', closeInfoWindow)
    }
    //标记点击事件处理函数
    function markerClick(e) {
      createMyInfoWindow(e.target.content)
    }
    //构建自定义信息窗体
    function createInfoWindow(content) {
      const info = document.createElement("div")
      info.className = "info"
      info.style.backgroundImage = `url(${baseCdn}info-window-bg.png)`
      info.style.backgroundSize = '100% 100%'

      // 定义中部内容
      const middle = document.createElement("div")
      middle.className = 'info-middle'
      middle.innerHTML = content
      info.appendChild(middle)

      return info
    }

    //关闭信息窗体
    function closeInfoWindow() {
      map.clearInfoWindow()
    }

    //创建自定义窗体
    function createMyInfoWindow(parkingData) {

      const content = '<h3>'+parkingData.name+'</h3>'+
        '<p><span>停车场内车辆数:</span>'+parkingData.count+'</p>'+
        '<p><span>线路数:</span>'+parkingData.lineCount+'</p>'+
        '<p><span>线路详情:</span>'+parkingData.lineList.join('、')+'</p>'

      const infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(content),
        offset: new AMap.Pixel(0, -30)
      })

      infoWindow.open(map, [parkingData.lng, parkingData.lat])
    }
  }
}

export default Map
